<template>
    <!--主体部分-->
    <el-main>
      <el-table
        ref="filterTable"
        :data="tableData"
        style="width: 100%"
        stripe>

        <el-table-column
          prop="createTime"
          label="创建时间">
          <template slot-scope="scope">
            {{scope.row.createTime | time}}
          </template>
        </el-table-column>

        <el-table-column
          prop="title"
          label="博客名称">
        </el-table-column>

        <el-table-column
          prop="description"
          label="博客简介">
        </el-table-column>

        <el-table-column
          prop="flag"
          label="博客类型">
        </el-table-column>

        <el-table-column
          label="编辑"
          align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>  

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>   
  
    </el-main>
</template>

<script>
  import qs from 'qs'
  export default {
    data(){
      return{
        params:{
          page:1,
          limit:1
        },
        tableData:[],
        total:0,
        msg:'',
        id:'',
        //搜索功能
        search:'',   
        
      }
    },
    watch:{
      $route:{
        handler(val,old){
          this.msg = val.query.msg
          this.id = val.query.id
          this.getData(val.query.msg, val.query.id)
        },
        deep:true
      }
    },
    created(){
      this.msg = this.$route.query.msg
      this.id = this.$route.query.id      
      this.getData(this.$route.query.msg, this.$route.query.id)
    },
    methods:{
      //根据路径获取对应的数据
      //msg:分类,id:分类id
      //msg:标签,id:标签id
      //msg:草稿
      async getData(msg, id){
        if(msg == 'type'){
            const {data:res} = await this.$http.get('blog/blogs/info/type/'+id,{
              params:this.params
            })
            this.tableData = res.page.list
            this.total = res.page.totalCount
        }else if(msg == 'tag'){
            const {data:res} = await this.$http.get('blog/blogs/info/tag/'+id,{
              params:this.params
            })
            this.tableData = res.page.list
            this.total = res.page.totalCount
        }else if(msg == 'draft'){
            const {data:res} = await this.$http.get('blog/blogs//draft',{
              params:this.params
            })
            this.tableData = res.page.list
            this.total = res.page.totalCount        
        }
      },
      //分页修改
      handleSizeChange(val) {
        this.params.limit = val
        this.getData(this.msg, this.id)
      },
      handleCurrentChange(val) {
        this.params.page = val
        this.getData(this.msg, this.id)
      },
      //修改文章
      handleEdit(msg){
        //TODO
        console.log(msg)
        this.$router.push({path:'/write',query:{
          form:msg
        }})
      },
      async handleDelete(msg){
        this.$confirm('是否确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          //根据row.id向服务器发送删除请求
          console.log(msg.id)
           const {data:res} = await this.$http.post('/blog/blogs/delete',qs.stringify({
             "id":msg.id
           }))
           console.log(res)
           //输出提示信息
            this.$message({
                type: res.meta.status == 200 ? 'success' : 'error',
                message: res.meta.msg
            });
           if(res.meta.status !== 200){
               return;
           }
          //  解决:当前页数据删除后没数据的情况
           this.params.page = 1
           this.params.limit = 1
           this.getData(this.msg, this.id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },















      resetDateFilter() {
        this.$refs.filterTable.clearFilter('date');
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },


      

    }
  }
</script>

<style scoped>
  .el-pagination{
    margin-top:25px;
  } 
</style>